\chapter{\texttt{AngularJS}}
\label{chap:AngularJS}
Пратећи најновије технологије за развој веб садржаја, овај рад као основу користи \texttt{AngularJS} платформу (у даљем тексту NG). Генерализујући и сумирајући њену суштину, може се рећи да је она нов и иновативан начин увођења трослојне архитектуре у клијентске веб технологије пружајући при томе могућност проширивања HTML синтаксе. Кључне функционалности и начин употребе ове платформе биће описани у следећим целинама:
\begin{itemize}
\item{функција платформе и њенa употреба,}
\item{процес учитавања и рад,}
\item{основни концепти.}
\end{itemize}


\section{Функција и употреба}
HTML је језик на којем се базирају веб технологије. Он је декларативан и самим тим одличан за представљање података и прављење структуре хијерархије коришћењем заглавља. Међутим, HTML као стандард не дефинише начин на који ће се подаци приказивати. Током протеклих деценија функционалности обраде и презентовања података у HTML коду су препуштене другим стандардима који имплементирају императивну парадигму програмирања. Они су одлични за надомештање функционалности од којих се HTML као стандард ограђује. Један од тих стандарда је ECMA стандард са \texttt{JavaScript} jезиком као најпопуларнијом имплементацијом. Добре праксе управљања HTML кодом коришћењем \texttt{JavaScript}-а су обједињене у посебне библиотеке, између којих можемо издвојити \texttt{jQuery} као најпопуларнију и најкоришћенију.

NG платформа даје могућност проширивања HTML језика у виду дефинисања нових заглавља или атрибута, при чему се сама структура HTML кода не нарушава. Њеним коришћењем HTML код веб апликације изгледа као да је и дизајниран за писање веб апликација. Њоме се Интернет прегледач практично "учи" новој синтакси и новим конструкцијама. Наведено представља само део могућности које NG платформа пружа. Оно што је кориснику мање видљиво су механизми које платформа имплементира, а који пружају контролу над DOM-ом, вршење AJAX упита и начине на које се асинхроно реагује на њихове резултате. Свакако међу најбитнијим стварима јесте и MVC трослојна архитектура, коју NG платформа усваја и тиме јасно разграничава домене у којима одређени механизми имају своју употребу.

Као и сваки производ NG  платформа има јасно дефинисане сценарије употребе са којима је у виду и дизајнирана. У сценарије се убрајају све веб апликације које интензивно користе CRUD операције. Дакле, апликације које захтевају комуникацију са базама података и радом са корисничким подацима.

Са друге стране би употреба NG платформе у изради све популарнијих веб игара била отежана, чак и непотребно, јер NG платформа зарад претходно наведених сценарија уводи нивое апстракције које у одређеним случајевима могу онемогућити програмера да приступи неким нижим механизмима који су му потребни.

\section{Процес учитавања и рад}

Након отварања веб странице, Интернет прегледач учитава добијени HTML код и од њега прави DOM. Такође се учитавају спољни стилови и скрипте међу којима се налази и NG {\it angular.js} скрипта. По завршетку учитавања DOM-а, Интернет прегледач емитује сигнал {\it DOMContentLoaded} који NG чека, и након којег тражи директиву {\it ng-app}. Овом директивом у облику HTML атрибута наводи се име NG апликације (модула) која се учитава. Треба имати на уму да апликација има домен важења у оквиру HTML заглавља у којем је дефинисана директива {\it ng-app}. Пошто је име апликације познато инстанцира се први објекат {\it \$injector}. Овај објекат инстанцира {\it \$compile} сервис и {\it \$rootScope} објекат. Сервис {\it \$compile} је функција која парсира цео DOM, детектује и обрађује NG директиве. У {\it \$rootScope} објекту се налазе глобалне променљиве и променљиве значајне самој платформи. На основу резултата компајлирања се генерише DOM који се приказује у Интернет прегледачу. Објашњен поступак учитавања је приказан на Слици \ref{fig:concept_startup}.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.8]{slike/concepts-startup-cir.png}
	\caption{Концепт фазе учитавања платформе и садржаја веб странице}
	\label{fig:concept_startup}
\end{figure}

\subsection{Рад платформе у реалном времену}

Имајући у виду интеракцију корисника са садржајима на веб страници сваки Интернет прегледач има посебну петљу у којој обрађује пристигле догађаје. У догађаје се могу убројити корисничка интеракција, истицање тајмера или одговор сервера. Функција која је задужена за обраду догађаја се позива и тада се улази у контекст \texttt{JavaScript}-а који, примера ради, може модификовати DOM. Завршавањем обраде догађаја Интернет прегледач приказује нов садржај.

Начин на који NG платформа омогућава имплементацију своје петље за процесирање догађаја је екстензија већ постојећег начина у \texttt{JavaScript} контексту. На овај начин све примењене операције унутар NG петље за обраду догађаја могу искористити њене механизме. Подсетимо се да је контекст NG апликације означен директивом {\it ng-app}, и да унутар овог контекста NG сам извршава своју петљу за спровођење одговора на догађаје. Уколико покушавамо приступити овом контексту из спољашњег \texttt{JavaScript} контекста користимо функцију {\it \$apply}.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.8]{slike/concepts-runtime-cir.png}
	\caption{Приказ извршавања платформе у току рада апликације}
\end{figure}

Као аргумент функцији {\it \$apply} предаје се функција коју ће NG извршити, и ући у својој петљу за обраду догађаја. Са слике се може видети да је NG {\it \$digest} главна петља и да она води рачуна о објектима {\it \$evalAsync} и {\it \$watch}. {\it \$evalAsync} објекат је ред који садржи све задатке који се морају извршити пре него што дође до исцртавања измењеног DOM у Интернет прегледачу. {\it \$watch} објекат је листа која садржи све објекте на којима може доћи до промена и због чије би промене требало реаговати. Уколико таквих промена има, {\it \$watch} петља мења вредности сходно насталим променама. Када су сви задаци из {\it \$evalAsync} реда извршени и када {\it \$watch} листа не указује на било какве настале промене, излази се из {\it \$digest} петље и исцртава се новонастали DOM.

\section{MVC архитектура}

MVC архитектура је начин дизајнирања архитектуре програмског кода где се постављају границе између три логичке компоненте: модела, корисничког интерфејса и контролера. Тиме се јасно разграничава део апликације који служи за приказивање, од дела који даје функционалност и програмску логику. Врло добро објашњена MVC архитектура дата је на Слици \ref{fig:mvc}.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.8]{slike/mvc_generally-cir.png}
	\caption{Приказ односа слојева MVC архитектуре}
	\label{fig:mvc}
\end{figure}

Као што се са слике може видети, кориснички интерфејс ({\it View}) је оно што корисник види и са чиме интерагује. Ипак, корисник заправо користи функционалности које описује контролер, при томе дајући могућност обраде података који се налазе у моделу. Однос између модела и корисничког интерфејса може бити дискутабилан и на Слици \ref{fig:mvc}, стрелица {\it Освежава} може бити интерпретирана као утисак који корисник добија када интерагује са корисничким интерфејсом. У домену веб апликације, следећа слика даје конкретније објашњење улоге MVC архитектуре.

\subsection{MVC у \texttt{AngularJS}}

\subsubsection{Контролер}

Као што је већ поменуто у претходној секцији, иза корисничког интерфејса се налази контролер који обезбеђује функционалности апликације. Начин на који је омогућена комуникација између корисничког интерфејса и контролера у NG платформи је одговарајући контекст ({\it scope}). Он представља спојницу између ова два слоја. Његова улога је представљена на Слици \ref{fig:concept}.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.8]{slike/concepts-controller-cir.png}
	\caption{Улога контролера у пружању података корисничком интерфејсу}
	\label{fig:concept}
\end{figure}

У NG платформи контекст представља објекат који посредује између представљених слојева архитектуре, при чему контролер дефинише променљиве и функције тог објекта док се кориснички интерфејс на њих референцира. Битна ставка код контекста је да сваки контролер има свој контекст и да кориснички интерфејс одабиром контролера, коришћењем директиве {\it ng-controler}, имплицитно одабира контекст који је контролеру додељен. Тек тада кориснички интерфејс може да приступи његовим параметрима или функцијама.

\subsubsection{Модел}

NG платформа не поставља никакве услове за начин дефинисања модела. То могу бити \texttt{JavaScript} објекти дефинисани на више начина. Оно што је неопходно је референцирање на модел унутар контекста како би његове вредности биле приступачне корисничком интерфејсу.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.8]{slike/concepts-model-cir.png}
	\caption{Различити начини креирања објеката који представљају модел}
\end{figure}

\subsubsection{Кориснички интерфејс}

Улога корисничког интерфејса је већ објашњена у претходним секцијама. Начин на који NG платформа генерише кориснички интерфејс се може врло добро објаснити упоређивањем са популарним методом шаблона који се користе у другим решењима. 

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.8]{slike/concepts-view-cir.png}
	\caption{Начин на који кориснички интерфејс користи механизме NG платформе и освежава DOM}
	\label{fig:concepts-view}
\end{figure}

На слици је појашњена разлика између система шаблона и начина на који  NG платформа генерише свој кориснички интерфејс. У наставку ће бити приказан основни пример генерисања DOM-а коришћењем \texttt{Handlebars.js} библиотеке за шаблоне.

\lstinputlisting[language=HTML5,caption=index.html]{primeri_koda/handlebars_primer.html}

\lstinputlisting[language=HTML5,caption=primer.js]{primeri_koda/handlebars_primer.js}

Позиви функција{\it compile} и {\it template} у линијама 2 и 8 датог \texttt{JavaScript} кода показују кључне механизме у коришћењу шаблона, што је приказано на Слици \ref{fig:concepts-view} десно.

NG платформа у процесу компајлирања DOM-а HTML странице идентификује, на пример {\it {{email}}} као директиву, у чему је основна разлика између NG платформе и претходно представљене \texttt{Handlebars.js} библиотеке. На основу идентификоване директиве, поставља се нова ставка у листи {\it \$watch}, о којој је било речи раније, и када дође до промене у њеном садржају петља догађаја NG платформе ће се побринути да промене у најкраћем могућем периоду буду видљиве на корисничком интерфејсу. Уколико је корисник својим акцијама хтео да измени вредности у моделу, цео механизам ће и то омогућити, пружајући при томе двосмерну везу између корисчког интерфејса и модела. Тај механизам је презентован на левом делу слике \ref{fig:concepts-view}.

%\section{Уметање зависности}
%Задатак овог поглавља је да читаоца приближи начину на који {\it NG} платформа користи овај дизајн шаблон како би омогућила инстанцирање сервиса без чврстог увезивања објеката. Коришћење уметања зависности је користан шаблон који између осталог омогућава спровођење {\it Unit} тестова над објектима у платформи. У даљем тексту ће се појмови сервис и објекат користити наизменично, јер се уметање зависности користи при захтевима инстанцирања сервиса, а сервиси као механизам нису ништа друго до објеката. Корисник ће у даљем тексту бити објекат који захтева инстанцирање сервиса.

%Начин на који се корисник може добити референцу објекта је:
%\begin{itemize}
%\item{коришћењем {\it new} оператора,}
%\item{коришћењем референце из глобалног контекста,}
%\item{коришћењем уметања зависности.}
%\end{itemize}

%Како је {\it JavaScript} слабо типизиран скрипт језик, уметање зависности је решено парсирањем аргумената који се задају при дефиницији севиса.

\section{Дирекиве}

Структура HTML кода се састоји од одређеног броја заглавља ({\it tag}-ова) која могу бити угњеждавана по потреби. Та заглавља могу имати атрибуте са дефинисаним вредностима. Такође, скоро сва заглавља имају атрибут класе преко којег се стилови из CSS кода примењују. NG платформа уводи врло моћан и сложен механизам који назива директивама. Оне могу бити декларисане као новa HTML заглавља, атрибути заглавља, класе, па чак и HTML коментари. Директиве се у NG платформи интензивно користе од самог учитавања апликације у Интернет прегледачу.

Апликација се у NG платформи дефинише као посебан модул који се на HTML страници учитава коришћењем директиве {\it ng-app}. Примера ради, ова директива је дефинисана као атрибут и његова вредност представља име модула апликације. {\it ng-app} директива има највиши ниво важења и обично се дефинише на {\it html} или {\it body} заглављима. Унутар само HTML кода се директиве могу користити у различитим облицима, било да су предефинисане или додатно дефинисане при прављењу апликације.

Директиве могу бити дефинисане на четири начина, и то у облику:
\begin{itemize}
\item атрибута ({\it ng-click, ng-repeat}),
\item новодефинисаних {\it HTML} заглавља,
\item класа или
\item коментара.
\end{itemize}

Ови облици директива дају врло велику флексибилност при употреби и широк спектар сценарија употребе. Битна ставка коју треба напоменути јесте да програмер може дефинисати своје директиве и њима проширити {\it HTML} синтаксу. Тиме се суптилно проширује {\it HTML} код, при чему се уводе нове функционалности које би се иначе имплементирале разним библиотекама и њиховим механизмима.

\lstinputlisting[language=HTML5,label=code:directive_primer,caption=Пример дефинисања директиве]{primeri_koda/directive_primer.js}

Листинг \ref{code:directive_primer} приказује начин дефинисања директиве. Може се видети да је директива посматрана као објекат. Један од основних атрибута који дефинишу директиву је {\it restrict}. Наведени пример дефинише директиву која истовремено може бити употребљена као атрибут, заглавље, класа или коментар. Други основни атрибут приказан у примеру је функција {\it link}. Ова функција се позива након процеса компајлирања целог DOM-а странице и њоме се врши додатно мењање DOM везаног за ову директиву.

\section{Филтери}
Најинтересантнији и можда најсликовитији пример употребе филтера у NG платформи је локализација апликације. Ситуација када од неког унапред задатог параметра апликација треба да мења све кључне исписе може се најпрактичније решити употребом филтера. Сама употреба подсећа на редирекцију на UNIX-оликим оперативним системима. Начин на који се они дефинишу и најједноставнији начин употребе ће бити представљени на следећем примеру.

\lstinputlisting[language=HTML5,label=code:filter_primer_js,caption=Пример дефинисања филтера]{primeri_koda/filter_primer.js}
\lstinputlisting[language=HTML5,label=code:filter_primer_html,caption=Пример употребе филтера]{primeri_koda/filter_primer.html}

Филтери се такође могу користити и при сортирању табеларних приказа. Уопштено, користе се на свим местима где је потребно посебно обрадити податак који се жели приказати. Пример употребе у локализацији је представљен јер су филтери у овом раду првенствено коришћени у ту сврху.

\section{Сервиси}
Посебни механизми на којима NG платформа базира своје функционалности у току рада веб апликације су сервиси. Они могу бити постојећи - предефинисани у платформи или кориснички - дефинисани у корисничкој апликацији. Пример сервиса платформе су {\it \$http} и {\it \$locale}. Сервиси се могу користити од стране свих претходно наведених механизама (директива и филтера), а могу бити коришћени и од стране нових сервиса. Гледајући са становишта софтверског инжињенинга, они префстављају синглтоне на нивоу апликације, који бивају креирани у процесу покретања апликације. У овом раду су интензивно коршћени и платформски и додатно дефинисани сервиси. Један од најкоришћенијих платформских сервиса је {\it \$http}. Он представља апстраковане AJAX механизме за извршавање асинхроних упита. На коришћењу овог сервиса су базирани сви сервиси апликације који допремају податке са серверске апликације. Дефиниција једног корисничког сервиса и коришћење платформских сервиса дато је у следећем листингу.

\lstinputlisting[language=HTML5,label=code:LoginService,caption=Пример дефинисања и употребе сервиса]{primeri_koda/news_app/LoginService.js}

Пошто платформа сервисе посматра као синглтоне, пример употребе ове особине је {\it UserService} сервис који у себи садржи корисничке податке као што су корисничко име, лозинка и путања до сервера. Ови подаци су јединствени на нивоу целе апликације и дефинишу се при ауторизацији, а могу бити коришћени кроз целу апликацију.

У примеру је коришћен {\it \$http} сервис за извршавање асинхроног AJAX упита који има функцију повременог испитивања доступности сервера. Поред ове употребе, {\it \$http} је коришћен и за слање података серверу на основу којих серверска апликација освежава своје податке. Нешто конкретније о овоме ће бити речи у следећим поглављима која ће описивати имплементације кључних функционалности апликације.

